<template>
	<!-- 单图 -->
	<view class="coreshop-imgsingle coreshop-bg-white" :class="listData[0].marginShow?'margin-radius':''"
		v-if="listData && listData.length > 0">
		<view v-for="(child, index) in listData" :key="index">
			<view @click="taped(child)">
				<image class="ad-img" :src="child.image" mode="widthFix"></image>
			</view>
			<view class="imgup-btn" v-if="child.buttonText != ''"
				@click="showSliderInfo(child.linkType, child.linkValue)">
				<button class="coreshop-btn"
					:style="{background:child.buttonColor,color:child.textColor}">{{child.buttonText}}</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "coreshopImgSingle",
		props: {
			coreshopData: {
				type: Array,
				required: true,
			}
		},
		data() {
			return {
				count: 0,
				listData: [],
			}
		},
		created() {
			this.listData = this.coreshopData;
		},
		methods: {
			taped(item) {
				this.showSliderInfo(item.linkType, item.linkValue);
			},
		},
	}
</script>

<style lang="scss" scoped>
	.margin-radius {
		margin: 10px;
		border-radius: 6px;
	}

	.coreshop-imgsingle {
		overflow: hidden;
		position: relative;

		.ad-img {
			width: 100%;
			float: left;
		}

		.ad-img:last-child {
			margin-bottom: 0;
		}

		.imgup-btn {
			position: absolute;
			z-index: 1;
			bottom: 10px;
			width: 100%;
			min-height: 30px;
			text-align: center;

			.coreshop-btn {
				line-height: 2;
				font-size: 14px;
				padding: 0 25px;
				border-radius: 25px;
			}
		}
	}
</style>
